<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    table {
      width: 400px;
      border: 1px solid #000;
      border-collapse: collapse;
      margin: 0 auto;
    }

    td,
    th {
      border: 1px solid #000;
      text-align: center;
    }

    input {
      width: 50px;
    }

    .search {
      width: 600px;
      margin: 20px auto;
    }
  </style>
</head>

<body>
<div class="search">
  按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
</div>
<table>
  <thead>
  <tr>
    <th>id</th>
    <th>产品名称</th>
    <th>价格</th>
  </tr>
  </thead>
  <tbody>

  </tbody>
</table>
<script>
  // 利用新增数组方法操作数据
  var data = [{
    id: 1,
    pname: '小米',
    price: 3999
  }, {
    id: 2,
    pname: 'oppo',
    price: 999
  }, {
    id: 3,
    pname: '荣耀',
    price: 1299
  }, {
    id: 4,
    pname: '华为',
    price: 1999
  }, ];

  var tbody = document.querySelector('tbody');
  var end = document.querySelector(".end");
  var start = document.querySelector(".start");
  var search_price = document.querySelector(".search-price");
  var search_pro = document.querySelector(".search-pro");

  function setData(arr) {
    tbody.innerHTML = '';
    arr.forEach(function(value, index, array) {
      var tr = document.createElement('tr');
      tr.innerHTML = '<td>' + value.id + '</td>' + '<td>' + value.pname + '</td>' + '<td>' + value.price + '</td>';
      tbody.appendChild(tr);
    })
  }

  search_price.addEventListener('click', function () {

  })

</script>
</body>

</html>